<!-- 可以把列表项放入template标签中，然后进行批量渲染  -->
<template>
  <!--el-dialog 在保留当前页面状态的情况下，弹出页面框,:title 动态的绑定标题的内容，:close-on-click-modal  动态绑定是否可以通过点击 modal 关闭 页面框，
    :visible.sync是否显示 Dialog，sync表示同步的修改了visible的值-->
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <!--el-form表单 弹出框里面的表单框
   :rules表单验证规则, ref用于给元素或组件取名单向绑定，并引用到$refs对象上,
      @keyup.enter.native="按钮绑定的事件名"，用于监听当用户释放Enter键按键时，则会调用`""`里的方法 
       label-width表示表单域标签的的宽度 -->
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <!-- el-form-item 用来展示表单项标签, 一个el-form-item中可以有多个输入框，
       label标签文本，prop表示表单中数据对象的字段-->
      <el-form-item label="参数名" prop="paramKey">
         <!--el-input 为受控组件,通过鼠标或键盘输入字符,v-model更新组件的绑定值 placeholder="参数名"是输入框占位文本-->
        <el-input v-model="dataForm.paramKey" placeholder="参数名"></el-input>
      </el-form-item>
      <!--label标签文本，prop表示表单域 数据对象的字段-->
      <el-form-item label="参数值" prop="paramValue">
         <!--el-input 为受控组件,通过鼠标或键盘输入字符,v-model更新组件的绑定值 placeholder="参数名"是输入框占位文本-->
        <el-input v-model="dataForm.paramValue" placeholder="参数值"></el-input>
      </el-form-item>
      <!-- label标签文本，prop表示表单域 数据对象的字段-->
      <el-form-item label="备注" prop="remark">
         <!--el-input 为受控组件,通过鼠标或键盘输入字符,v-model更新组件的绑定值 placeholder="参数名"是输入框占位文本-->
        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
      </el-form-item>
    </el-form>
    <!-- span行标签，slot属性用于定义一个插槽，class类名用于标识和选择元素的样式-->
    <span slot="footer" class="dialog-footer">
       <!--el-button 常用的操作按钮, @click="visible = false"用户点击取消可视化为false-->
      <el-button @click="visible = false">取消</el-button>
      <!--el-button 常用的操作按钮,type="primary"按钮类型为主要按钮 @click="dataFormSubmit()"用户点击确定执行dataFormSubmit()-->
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<!-- JS代码脚本，用于在 HTML 页面中嵌入 JavaScript 代码 -->
<script>

// export声明页面所需要用到的变量、全局变量、方法等
  export default {
    data () {
      return {//用return返回初始数据的一个全新数据对象。
        visible: false,//可视化为不显示
        dataForm: {//数据对象，里面是空的字段
          id: 0,
          paramKey: '',
          paramValue: '',
          remark: ''
        },
        dataRule: {//验证规则
          paramKey: [//参数名的规范
            { required: true, message: '参数名不能为空', trigger: 'blur' }//required内容是否为必填，当内容为空时触发message: 提示信息，trigger: 'blur'当失去焦点时触发
          ],
          paramValue: [//参数值的规范
            { required: true, message: '参数值不能为空', trigger: 'blur' }//required内容是否为必填，当内容为空时触发message: 提示信息，trigger: 'blur'当失去焦点时触发
          ]
        }
      }
    },
    methods: {// methods 编写js函数
      init (id) {
        this.dataForm.id = id || 0//dataForm.id是传过来的id或0
        this.visible = true//可视化状态
        this.$nextTick(() => {//是钩子函数，当组件显示后并数据发生变化，系统自动执行该函数
          this.$refs['dataForm'].resetFields()//resetFields重置表单内容
          if (this.dataForm.id) {//if判断 
            this.$http({//发送HTTP请求，通过发送get请求来获取数据列表，并在请求成功时处理响应
              //this.$http.adornUrl()和this.$http.adornParams()是拦截器中拦截的函数，可以对url和params进行处理
              url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),//发送请求的路径
              method: 'get',//方式为GET请求
              params: this.$http.adornParams()//是用来传递查询参数的部分
                // then(({data}) => { 里的data是指接口成功返回的数据
            }).then(({data}) => {//.then 获取数据后执行下面内容
              if (data && data.code === 0) {//判断date是否为真值，并且data.code 是否严格等于0，都为真就执行里面的语句，通常表示请求成功 打印整个响应体
                this.dataForm.paramKey = data.config.paramKey
                this.dataForm.paramValue = data.config.paramValue
                this.dataForm.remark = data.config.remark
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {//用来验证表单数据，valid是用于存储表单验证的结果状态
          if (valid) {
            this.$http({//发送HTTP请求，通过发送post请求来获取数据列表，并在请求成功时处理响应
               //this.$http.adornUrl()是拦截器中拦截的函数，可以对url进行处理
              url: this.$http.adornUrl(`/sys/config/${!this.dataForm.id ? 'save' : 'update'}`),//发送请求的路径
              method: 'post',//方式为POST请求
              data: this.$http.adornData({//封装请求对象
                'id': this.dataForm.id || undefined,
                'paramKey': this.dataForm.paramKey,
                'paramValue': this.dataForm.paramValue,
                'remark': this.dataForm.remark
              })
              // then(({data}) => { 里的data是指接口成功返回的数据
            }).then(({data}) => {//数据成功处理后执行下面内容
              if (data && data.code === 0) {//判断date是否为真值，并且data.code 是否严格等于0，都为真就执行里面的语句
                this.$message({//用于主动操作后的反馈消息提示
                  message: '操作成功',//消息文字
                  type: 'success',//主题类型
                  duration: 1500,//显示时间, 毫秒。设为 0 则不会自动关闭
                  onClose: () => {//关闭时的回调函数, 参数为被关闭的 message 实例
                    this.visible = false//可视化设为false
                    this.$emit('refreshDataList')//使用this.$emit()调用自定义的事件
                  }
                })
              } else {
                this.$message.error(data.msg)//用于显示一条错误级别的提示信息
              }
            })
          }
        })
      }
    }
  }
</script>
